<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      :inline="true"
      label-width="80px"
    >
      <!-- 熔炼 -->
      <el-row>
        <el-col>
          <h2>熔炼:</h2>
          <el-form-item label="数量:" prop="keyProcessDOList[0].num">
            <el-input-number v-model="form.keyProcessDOList[0].num" />
          </el-form-item>

          <el-form-item label="班次" prop="keyProcessDOList[0].group">
            <el-select
              placeholder="请选择班次"
              v-model="form.keyProcessDOList[0].group"
            >
              <el-option label="1班" value="1" />
              <el-option label="2班" value="2" />
              <el-option label="3班" value="3" />
            </el-select>
          </el-form-item>

          <el-form-item label="操作员工" prop="keyProcessDOList[0].userIdList">
            <el-select
              multiple
              placeholder="请选择操作员工"
              v-model="form.keyProcessDOList[0].userIdList"
              filterable
            >
              <el-option
                v-for="item in rlList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="检验时间" prop="keyProcessDOList[0].workTime">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.keyProcessDOList[0].workTime"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 浇筑 -->
      <el-row>
        <el-col>
          <h2>浇筑:</h2>
          <el-form-item label="数量:" prop="keyProcessDOList[1].num">
            <el-input-number v-model="form.keyProcessDOList[1].num" />
          </el-form-item>

          <el-form-item label="班次" prop="keyProcessDOList[1].group">
            <el-select
              placeholder="请选择班次"
              v-model="form.keyProcessDOList[1].group"
            >
              <el-option label="1班" value="1" />
              <el-option label="2班" value="2" />
              <el-option label="3班" value="3" />
            </el-select>
          </el-form-item>

          <el-form-item label="操作员工" prop="keyProcessDOList[1].userIdList">
            <el-select
              multiple
              placeholder="请选择操作员工"
              filterable
              v-model="form.keyProcessDOList[1].userIdList"
            >
              <el-option
                v-for="item in jzList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="检验时间" prop="keyProcessDOList[1].workTime">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.keyProcessDOList[1].workTime"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 抛丸 -->
      <el-row>
        <el-col>
          <h2>抛丸:</h2>
          <el-form-item label="数量:" prop="keyProcessDOList[2].num">
            <el-input-number v-model="form.keyProcessDOList[2].num" />
          </el-form-item>

          <el-form-item label="班次" prop="keyProcessDOList[2].group">
            <el-select
              placeholder="请选择班次"
              v-model="form.keyProcessDOList[2].group"
            >
              <el-option label="1班" value="1" />
              <el-option label="2班" value="2" />
              <el-option label="3班" value="3" />
            </el-select>
          </el-form-item>

          <el-form-item label="操作员工" prop="keyProcessDOList[2].userIdList">
            <el-select
              multiple
              placeholder="请选择操作员工"
              filterable
              v-model="form.keyProcessDOList[2].userIdList"
            >
              <el-option
                v-for="item in pwList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="检验时间" prop="keyProcessDOList[2].workTime">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.keyProcessDOList[2].workTime"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 铲磨 -->
      <el-row>
        <el-col>
          <h2>铲磨:</h2>
          <el-form-item label="数量:" prop="keyProcessDOList[3].num">
            <el-input-number v-model="form.keyProcessDOList[3].num" />
          </el-form-item>

          <el-form-item label="班次" prop="keyProcessDOList[3].group">
            <el-select
              placeholder="请选择班次"
              v-model="form.keyProcessDOList[3].group"
            >
              <el-option label="1班" value="1" />
              <el-option label="2班" value="2" />
              <el-option label="3班" value="3" />
            </el-select>
          </el-form-item>

          <el-form-item label="操作员工" prop="keyProcessDOList[3].userIdList">
            <el-select
              multiple
              placeholder="请选择操作员工"
              filterable
              v-model="form.keyProcessDOList[3].userIdList"
            >
              <el-option
                v-for="item in cmList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="检验时间" prop="keyProcessDOList[3].workTime">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.keyProcessDOList[3].workTime"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="submit">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { getWorkerList, processInput } from "@/api/work/process";
import * as dept from "@/common/deptEnum"
export default {
  props: ["batchId"],
  data() {
    return {
        dept:dept,
      form: {
        keyProcessDOList: [
          {
            batch: this.batchId,
            processId: 103,
            num: null,
            group: null,
            userIdList: null,
            workTime: null,
          },
          {
            batch: this.batchId,
            processId: 104,
            num: null,
            group: null,
            userIdList: null,
            workTime: null,
          },
          {
            batch: this.batchId,
            processId: 105,
            num: null,
            group: null,
            userIdList: null,
            workTime: null,
          },
          {
            batch: this.batchId,
            processId: 106,
            num: null,
            group: null,
            userIdList: null,
            workTime: null,
          },
        ],
      },
      //   process: [
      //     {batch:this.batchId, processId: 103, num: null, group: null, userIdList: [], workTime: null },
      //     {batch:this.batchId, processId: 104, num: null, group: null, userIdList: [], workTime: null },
      //     {batch:this.batchId, processId: 105, num: null, group: null, userIdList: [], workTime: null },
      //     {batch:this.batchId, processId: 106, num: null, group: null, userIdList: [], workTime: null },
      //   ],
      workerList: [],
      rlList:[],
      jzList:[],
      pwList:[],
      cmList:[],
      rules: {
        "keyProcessDOList[0].num": [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
        "keyProcessDOList[0].userIdList": [
          {
              type: 'array',
            required: true,
            message: "请选择员工",
            trigger: 'change',
          },
        ],
        "keyProcessDOList[0].workTime": [
          {
            required: true,
            message: "请选择时间",
            trigger: "blur",
          },
        ],

        "keyProcessDOList[1].num": [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
        "keyProcessDOList[1].userIdList": [
          {
            type: 'array',
            required: true,
            message: "请选择员工",
            trigger: 'change',
          },
        ],
        "keyProcessDOList[1].workTime": [
          {
            required: true,
            message: "请选择时间",
            trigger: "blur",
          },
        ],

        "keyProcessDOList[2].num": [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
        "keyProcessDOList[2].userIdList": [
          {
             type: 'array',
            required: true,
            message: "请选择员工",
            trigger: 'change',
          },
        ],
        "keyProcessDOList[2].workTime": [
          {
            required: true,
            message: "请选择时间",
            trigger: "blur",
          },
        ],

        "keyProcessDOList[3].num": [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
        "keyProcessDOList[3].userIdList": [
          {
             type: 'array',
            required: true,
            message: "请选择员工",
            trigger: 'change',
          },
        ],
        "keyProcessDOList[3].workTime": [
          {
            required: true,
            message: "请选择时间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getWorker();
  },
  methods: {
    getWorker() {
        getWorkerList({deptId:this.dept.RL_DEPT}).then((res) => {
        this.rlList = res.data;
      });

      getWorkerList({deptId:this.dept.JZ_DEPT}).then((res) => {
        this.jzList = res.data;
      });

      getWorkerList({deptId:this.dept.PW_DEPT}).then((res) => {
        this.pwList = res.data;
      });

      getWorkerList({deptId:this.dept.CM_DEPT}).then((res) => {
        this.cmList = res.data;
      });

    },
    cancel() {
        this.$emit("closeMyself",false)
    },
    // queryWorker(deptId) {
    //   getWorkerList({ deptId: deptId }).then((res) => {
    //     this.workerList = res.data;
    //     console.log(res);
    //   });
    // },
    submit() {
      // this.$refs["form"].validate((valid) => {
      // if (valid) {
      this.addProcess(this.form);
      // }
      //   });
    },
    addProcess(data) {
      processInput(data)
        .then((res) => {
          this.msgSuccess("添加成功！");
          this.cancel();
        })
        .catch((err) => {
          this.msgError("添加失败！");
        });
    },
  },
};
</script>
